<template>
  <base-dialog v-bind="$attrs" v-on="$listeners" :title="title" size="tiny" @submit="toSubmit" :disabled="false">
    <el-input  type="textarea" v-model="suggestion" clearable :style="{width: '100%'}" :autosize="{minRows: 4, maxRows: 4}" :placeholder="placeholder" @input="saveSuggestion">
    </el-input>
    <p>常用意见</p>
    <div class="msg-list">
      <template  v-for="(item,index) in msgList">
        <span :key="index" @click="setSuggestion(item.suggestion)">{{item.suggestion}}</span>
      </template>
    </div>
  </base-dialog>

</template>
<script>
  import common from "@/api/common/index";
  import BaseDialog from '../../Common/BaseDialog'
  import workManagement from "@/api/workManagement/index";
  export default {
    name:"SuggestionCommonDialog",
    components: { BaseDialog },
    props:{
      btn:{
        type:Object,
        default:{}
      },
      value:{
        type:String,
        default:""
      }
    },
    created() {
      this.getTicketsUserMsg()
    },
    computed:{
      placeholder(){
        return this.btn.is_required?"请输入备注/处理意见（必填）":"请输入备注/处理意见（非必填）"
      },
      title(){
        return this.btn.alert_text?this.btn.alert_text:"请输入处理意见"
      },
      suggestion:{
        get(){
          return this.value
        },
        set(v){
          this.$emit("input",v)
        }
      }
    },
    data(){
      return {
        msgList: []
      }
    },
    methods:{
      saveSuggestion(val){
        setTimeout(()=>{
          if(val == this.suggestion){
            this.setDocumentTemporary()
          }
        },3000)
      },
      setDocumentTemporary(){
        common.setDocumentTemporary(this.row.id,{suggestion:this.suggestion})
      },
      setSuggestion(msg){
        this.suggestion = msg
      },
      toSubmit(){
        if(!this.suggestion&&this.btn.is_required){
          this.msgError("意见不能为空!")
        }else{
          this.$emit("callback")
          this.$emit("update:visible",false)
        }
      },
      getTicketsUserMsg() {
        workManagement.getTicketsUserMsg().then(res => {
          this.msgList = res.data
          this.msgList.map(item => {
            item.text = item.suggestion.length>20?item.suggestion.substring(0,20)+"...":item.suggestion
          })
        })
      },
    }

  }
</script>
<style lang="scss" scoped>
  p{
    margin: 10px 0;
    color: #9e9e9e;
  }
  .msg-list{
    flex-wrap:wrap;
    display: flex;
    span{
      color: black;
      background: #f1f1f1;
      padding: 5px 10px;
      margin-right: 5px;
      border-radius: 4px;
      margin-bottom: 5px;
      cursor: pointer;
    }
  }
</style>
